<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 .pagination {
  display: flex;
  justify-content: center;
}
.pagination button {
  margin: 0 5px;
}
.pagination button.active {
  background-color: aqua;
}
</style>
<body>
    <div id="app">
   <v-btn :total="total"
   :b="currentPage"
   :a="pageSize"
   @click="add"></v-btn>
  
    </div>
</body>
<script src="Vue.js"></script>
<script>
    const {createApp,ref,computed} = Vue
    const app =createApp({
        setup(){
          let total = ref(150)
          function add(val){
             currentPage.value = val.value
          }
          return{
            total,
            add
          }
        }
    })
    app.component('v-btn',{
        props:{
            total: {
      type: Number,
      required: true,
    },
    page: {
      type: Number,
      default: 15,
    },
    pageSize: {
      type: Number,
      default:10,
    },
        },
       
        setup(props){
            const currentPage = ref(props.page);
     const totalPages = computed(function(){
       return Math.ceil(props.total / props.pageSize);
     })
   function prevPage(){
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };

   function nextPage() {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
      }
    };

    return {
      currentPage,
      totalPages,
      prevPage,
      nextPage,
    };
  },
    template :`<div class="pagination">
    <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
    <button
      v-for="page in page"
      :key="page"
      :class="{ active: currentPage === page }"
      @click="currentPage = page"
    >
      {{ page }}
    </button>
    <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
  </div>`
    })
    app.mount('#app')
</script>
</html>